
import React from 'react';
import { Bubble } from '@ant-design/x';
import useStyle from '../../views/Index';
import logo from "../../assets/images/avatar.png";
// import Logo from "../../assets/images/ai-avatar.svg"; // 直接导入 SVG 文件

const roles = {
  assistant: {
    placement: 'start',
    header: process.env.REACT_APP_LOGO_NODE_TITLE,
    variant: 'borderless',
    avatar: {
      icon: <img src={logo} alt="avatar" />,
      style: {
        width: '2rem',
        height: '2rem',
        '@media (max-width: 768px)': {
          width: '1.5rem',
          height: '1.5rem'
        }
      }
    },
    typing: {
      step: 5,
      interval: 20,
      suffix: <>💗</>,
    },
    // 消息气泡样式优化
    messageStyle: {
      maxWidth: '80%',
      '@media (max-width: 768px)': {
        maxWidth: '90%'
      }
    }
  },
  user: {
    placement: 'end',
    variant: 'filled',
  },
};


const BubbleChat = ({ items, placeholderNode, RenderMarkdown }) => {
  const { styles } = useStyle();
  const listRef = React.useRef(null);

  return (
    <div>
      {items.length > 0 ? <Bubble.List
        ref={listRef}

        // header="健康管家"
        roles={roles}
        items={
          items
        }
        className={styles.messages}
        autoScroll={true}

      /> : <Bubble.List
        ref={listRef}

        // header="健康管家"
        roles={roles}
        items={[
          {
            content: placeholderNode,
            variant: 'borderless',
          },
        ]
        }
        className={styles.messagesContain}
        autoScroll={true}

      />}
    </div>


    //   <div  v-if={items.length > 0}>

    //   </div>
    //      <div  v-else>
    //  <Bubble.List
    //     ref={listRef}
    //     v-else
    //     // header="健康管家"
    //     roles={roles}
    //     items={
    //       items.length > 0
    //         ? items
    //         : [
    //             {
    //               content: placeholderNode,
    //               variant: 'borderless',
    //             },
    //           ]
    //     }
    //     className={styles.messages}
    //     autoScroll={true}

    //   />
    //      </div>

  );
};
export default BubbleChat;